<template>
    <el-container style="height: 100%;">
      <!-- 侧边栏 -->
      <el-aside width="250px" class="sidebar">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/residents">居民信息</el-menu-item>
          <el-menu-item index="/houses">房屋信息</el-menu-item>
          <el-menu-item index="/properties">物业管理</el-menu-item>
          <el-menu-item index="/complaints">投诉建议</el-menu-item>
          <el-menu-item index="/activities">社区活动</el-menu-item>
          <el-menu-item index="/system">系统管理</el-menu-item>
        </el-menu>
      </el-aside>
  
      <!-- 主体内容区域 -->
      <el-main>
        <el-row class="content" justify="center" style="margin-top: 20px;">
          <el-col :span="18">
            <el-card>
              <div class="header">
                <h3>社区活动管理</h3>
                <el-button type="primary" @click="openAddActivityDialog">发布活动</el-button>
              </div>
  
              <el-table :data="activities" stripe>
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="activityName" label="活动名称" width="150"></el-table-column>
                <el-table-column prop="activityDate" label="活动日期" width="150"></el-table-column>
                <el-table-column prop="activityLocation" label="活动地点" width="150"></el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button type="text" @click="openEditActivityDialog(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteActivity(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
  
              <!-- 发布活动弹窗 -->
              <el-dialog title="发布活动" :visible.sync="addActivityDialogVisible">
                <el-form :model="newActivity" ref="addActivityForm">
                  <el-form-item label="活动名称" :label-width="'100px'">
                    <el-input v-model="newActivity.activityName" placeholder="请输入活动名称"></el-input>
                  </el-form-item>
                  <el-form-item label="活动日期" :label-width="'100px'">
                    <el-date-picker v-model="newActivity.activityDate" type="date" placeholder="选择活动日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="活动地点" :label-width="'100px'">
                    <el-input v-model="newActivity.activityLocation" placeholder="请输入活动地点"></el-input>
                  </el-form-item>
                </el-form>
  
                <div slot="footer" class="dialog-footer">
                  <el-button @click="addActivityDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitAddActivity">确认</el-button>
                </div>
              </el-dialog>
  
              <!-- 编辑活动弹窗 -->
              <el-dialog title="编辑活动" :visible.sync="editActivityDialogVisible">
                <el-form :model="currentActivity" ref="editActivityForm">
                  <el-form-item label="活动名称" :label-width="'100px'">
                    <el-input v-model="currentActivity.activityName" placeholder="请输入活动名称"></el-input>
                  </el-form-item>
                  <el-form-item label="活动日期" :label-width="'100px'">
                    <el-date-picker v-model="currentActivity.activityDate" type="date" placeholder="选择活动日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="活动地点" :label-width="'100px'">
                    <el-input v-model="currentActivity.activityLocation" placeholder="请输入活动地点"></el-input>
                  </el-form-item>
                </el-form>
  
                <div slot="footer" class="dialog-footer">
                  <el-button @click="editActivityDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitEditActivity">确认</el-button>
                </div>
              </el-dialog>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElContainer, ElAside, ElMenu, ElMenuItem, ElMain, ElRow, ElCol, ElButton, ElCard, ElTable, ElTableColumn, ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker } from 'element-plus';
  import { getAllActivities, addActivity, updateActivity, deleteActivity as del } from '@/utils/axios';
  
  const activeMenu = ref('/activities');
  const activities = ref([]);
  const addActivityDialogVisible = ref(false);
  const editActivityDialogVisible = ref(false);
  const newActivity = ref({
    activityName: '',
    activityDate: '',
    activityLocation: ''
  });
  const currentActivity = ref({
    id: null,
    activityName: '',
    activityDate: '',
    activityLocation: ''
  });
  
  // 获取活动数据
  const loadActivities = async () => {
    const response = await getAllActivities();
    activities.value = response;
  };
  
  // 打开发布活动弹窗
  const openAddActivityDialog = () => {
    newActivity.value = {
      activityName: '',
      activityDate: '',
      activityLocation: ''
    };
    addActivityDialogVisible.value = true;
  };
  
  // 提交发布活动信息
  const submitAddActivity = async () => {
    await addActivity(newActivity.value);
    addActivityDialogVisible.value = false;
    loadActivities();
  };
  
  // 打开编辑活动弹窗
  const openEditActivityDialog = (activity) => {
    currentActivity.value = { ...activity };
    editActivityDialogVisible.value = true;
  };
  
  // 提交编辑活动信息
  const submitEditActivity = async () => {
    await updateActivity(currentActivity.value.id, currentActivity.value);
    editActivityDialogVisible.value = false;
    loadActivities();
  };
  
  // 删除活动
  const deleteActivity = async (id) => {
    await del(id);
    loadActivities();
  };
  
  onMounted(() => {
    loadActivities();
  });
  </script>
  
  <style scoped>
  .content {
    padding: 20px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .el-button {
    margin-left: 10px;
  }
  
  .el-dialog {
    width: 400px;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
  </style>
  